<!--<!DOCTYPE>-->
<!--<html>-->
<!--<head>-->
<!--<meta charset="UTF-8">-->
<!--<title>登录</title>-->
<!--<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">-->
<!--<link rel="stylesheet" href="__STATIC__/css/login.css">-->
<!--</head>-->
<!--<body>-->
<!--<div class="login-container" style="height:100%">-->

<!--    <div class="clouds clouds-footer"></div>-->
<!--    <div class="clouds"></div>-->
<!--    <div class="clouds clouds-fast"></div>-->
<!--    <div id="login_form" class="container">-->
<!--    <form action='login_submit' method="post" class="content">-->
<!--            <div class="people">-->
<!--                <div class="tou"></div>-->
<!--                <div id="left-hander" class="initial_left_hand transition"></div>-->
<!--                <div id="right-hander" class="initial_right_hand transition"></div>-->
<!--            </div>-->
<!--            <ul>-->
<!--                <li>-->
<!--                  <h2>-->
<!--                  用户登录<span>UserLogin</span>-->
<!--                  </h2>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <input style="display:none" type="text" name="user_name"/>-->
<!--                    <input required="required"-->
<!--                           pattern="^\S{4,}$"-->
<!--                           title="请输入4位及以上的字符"-->
<!--                           type="text"-->
<!--                           name="user_name"-->
<!--                           autocomplete="off"-->
<!--                           autofocus="autofocus"-->
<!--                           class="login-input username"-->
<!--                           placeholder="请输入用户名"/>-->
<!--                </li>-->
<!--                <li>-->
<!--                <input style="display:none" type="password" name="user_passwd"/>-->
<!--                    <input required="required"-->
<!--                           pattern="^\S{6,}$"-->
<!--                           title="请输入6位及以上的字符"-->
<!--                           type="password"-->
<!--                           name="user_passwd"-->
<!--                           autocomplete="off"-->
<!--                           class="login-input password"-->
<!--                           placeholder="请输入密码"/>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <input required="required"-->
<!--                           pattern="^\S{4}$"-->
<!--                           title="请输入4位字符"-->
<!--                           type="vertify"-->
<!--                           name="user_vertify"-->
<!--                           autocomplete="off"-->
<!--                           class="login-input vertify"-->
<!--                           placeholder="请输入验证码"/>-->
<!--                  <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?x='+Math.random();" />-->
<!--                </li>-->
<!--                <li class="text-center">-->
<!--                    <a href="/" class="toReturn">返 回</a>-->

<!--                    <button type="submit" class="layui-btn">立 即 登 入</button>-->
<!--                    <a href="regist" class="toRegist">先 去 注 册</a>-->

<!--                </li>-->
<!--            </ul>-->
<!--        </form>-->
<!--  </div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->


<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="__STATIC__/css/login.css">
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/jquery-ui.min.js"></script>
    <script src="__STATIC__/js/vue.min.js"></script>
</head>
<body>
<div class="loginbox" id="loginBox">

    <div class="login-container" style="height:100%">

    <div class="clouds clouds-footer"></div>
    <div class="clouds"></div>
    <div class="clouds clouds-fast"></div>
        <div id="login_form" class="container" style="height:750px">

<!--    <div class="container">-->
<!--        <form action='login_submit' method="post" class="content">-->

        <form @submit.prevent='send' class="content" >

            <div class="people">
                <div class="tou"><a href="__ROOT__/index" style="color: #754930;position: absolute;left: 4px;top: 25px;width: 97px;  height: 92px;text-align: center">index</a></div>
                <div id="left-hander" class="initial_left_hand transition"></div>
                <div id="right-hander" class="initial_right_hand transition"></div>
            </div>

            <ul>
                <li>
                    <h2>
                        用户登录<span>UserLogin</span>
                    </h2>
                </li>
                <span>
                    <input style="display:none" type="text"  v-model="username" name="username"/>
                    <input required="required"
                           pattern="^\S{4,}$"
                           title="请输入4位及以上的字符"
                           type="text"
                           name="username"
                           v-model="username"
                           autocomplete="off"
                           autofocus="autofocus"
                           class="login-input username"
                           placeholder="请输入用户名"/>
                </span>
                <span>
                    <input style="display:none" type="password"  v-model="password" name="password"/>
                    <input required="required"
                           pattern="^\S{6,}$"
                           title="请输入6位及以上的字符"
                           type="password"
                           name="password"
                           v-model="password"
                           autocomplete="off"
                           class="login-input password"
                           placeholder="请输入密码"/>
                </span>
                <span>
                    <input required="required"
                           pattern="^\S{4}$"
                           title="请输入4位字符"
                           type="vertify"
                           v-model="verify_num"
                           autocomplete="off"
                           class="login-input vertify"
                           placeholder="请输入验证码"/>

                    <div>
                    <img src="{:captcha_src()}" onclick="this.src='{:captcha_src()}?x='+Math.random();" />
                    </div>

                </span>

                <li class="text-center">

                    <a href="/" class="toReturn">返 回</a>

                    <button type="submit" class="layui-btn" >立 即 登 入</button>
                    <a href="regist" class="toRegist">先 去 注 册</a>

                </li>
            </ul>
        </form>
        </div>
<!--    </div>-->
</div>
</div>
</body>

<script>
    var loginBox = new Vue({
        el : '#loginBox',
        data : {
            username : '',
            password : '',
            verify_num:'',
        },
        methods : {
            send : function(){
                var _self = this;
                // console.log('11')
                $.ajax({
                    type : 'POST',
                    sync:true,
                    url : 'http://message.com/index/login/login',
                    data : {
                        username : _self.username.trim(),
                        password : _self.password.trim(),
                        verify_num : _self.verify_num.trim(),
                    },
                    dataType:'Json',
                    success : function(result){
                        if(result.status == 0){
                            localStorage.mUser = _self.username;
                            localStorage.mSid = result.sid;
                            alert(result.msg)
                            setTimeout(1000)
                            location.href = '/';
                        }else{
                            alert(result.msg)
                        }
                    }
                })
            }
        }
    })
</script>

</html>